<template>
	<view class="tbody">
		  <!--组件引用-->
				<!-- <floating></floating> -->
		<!-- 展示图片 -->
		<uni-swiper-dot :dots-styles="dotsStyles" class="uni-swiper-dot-box" :info="slideshow_rows" :current="current"
			field="content" :mode="mode">
			<swiper class="swiper-box" :current="swiperDotIndex">
				<swiper-item v-for="(item, index) in slideshow_rows" :key="index">
					<view class="swiper-item" @click="slideshowparticulars(item.id)">
						<image :src="ip + item.slideshowImage" mode="aspectFill" :draggable="false" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<!-- 导航 -->
		<view class="navigation">
			<!-- 学习 -->
			<view @click="contribution2">
				<view class="style-two">
					<image src="/static/images/书籍-打开@2x (4).png" mode=""></image>
				</view>
				<view class="text">
					学习
				</view>
			</view>
			<!-- 活动 -->
			<view @click="contribution3">
				<view class="style-three">
					<image src="/static/images/旗子@2x.png" mode=""></image>
				</view>
				<view class="text">
					活动
				</view>
			</view>
			<!-- 诉求 -->
			<view @click="appeal">
				<view class="style-four">
					<image src="/static/images/编辑文件@2x.png" mode=""></image>
				</view>
				<view class="text">
					建议
				</view>
			</view>
			<!-- 贡献 -->
			<view @click="contribution">
				<view class="style-one">
					<image src="/static/images/奖杯@2x (1).png" mode=""></image>
				</view>
				<view class="text">
					贡献
				</view>

			</view>
		</view>

		<u-collapse :border="false">
			<u-collapse-item title="最近更新" :border="false" :duration="600">
				<!-- 标题 -->
				<!-- 		<view class="headline">
			最近更新
		</view> -->

				<view v-for="(item,index) in list" :key="index" class="u-collapse-content">
					<view class="articleBox" @click="active(item)">
						<image :src="ip + item.coverImage" mode="" class="articleBox-image" />
						<view class="articleBox-box">
							<!-- 标题 -->
							<view class="headline">
								{{item.title}}
							</view>
							<!-- 文章内容 -->
							<text class="text">
								{{item.content}}
							</text>
							<!-- 学习人数 时间 -->
							<view class="state">
								<!-- 分类标签 -->
								<view class="state-left" :class="item.modelName === '学习' ? 'study' :'activity'">
									{{item.modelName}}
								</view>
								<view class="state-right">
									<!-- 发布人 -->
									<view class="state-right-one">
										<image src="../../static/images/我的@2x.png" mode="" />
										<text class="state-right-one-name" style="margin-right: 20rpx;">
											{{item.publishName}}</text>
									</view>
									<!-- 时间 -->
									<view class="state-right-one">
										<image src="../../static/images/时间@2x.png" mode="" style="margin-right: 6rpx;">
										</image>
										<text class="state-right-one-name">{{item.createTime}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-collapse-item>
		</u-collapse>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				ip: this.$store.state.user.URL,
				slideshow_rows: [],
				list: [],
			};
		},
		onShow() {
			this.getSlideshow();
			this.getList()

		},
		methods: {
			// 轮播图详情
			slideshowparticulars(id) {
				uni.navigateTo({
					url: `/pages/slideshowparticulars/slideshowparticulars?id=${id}`
				})
			},
			// 获取轮播图
			async getSlideshow() {
				const res = await uni.$http.get('/business/slideshow/list')
				if (res.statusCode === 200) {
					this.slideshow_rows = []
					this.slideshow_rows = res.data.rows
				}
			},
			// 获取最近更新
			getList() {
				uni.$http.get('/business/messageNotification/recentUpdates').then((res => {
					this.list = res.data.rows
					for (let i = 0; i < this.list.length; i++) {
						this.list[i].content = this.list[i].content.replace(/<\/p><p>/g, "   "); // 每段p标签中间加段空格
						this.list[i].content = this.list[i].content.replace(/<[^>]*>/g, "");
					}
				}))
			},
			// 最近更新 点击跳转
			active(item) {
				// 消息设置已读
				// uni.$http.get('/business/messageNotification/changeReadYes/' + item.id)
				if (item.modelName === '学习') {
					uni.navigateTo({
						url: '../studyDetails/studyDetails?id=' + item.mid
					})
				} else {
					uni.navigateTo({
						url: '../activityDetails/activityDetails?id=' + item.mid
					})
				}
			},
			contribution3() {
				uni.navigateTo({
					url: '/pages/activity/activity'
				})
			},
			//
			contribution2() {
				uni.navigateTo({
					url: '/pages/study/study'
				})
			},
			// 点击贡献跳转
			contribution() {
				uni.navigateTo({
					url: '/pages/contribution/contribution'
				})
			},
			// 点击诉求跳转
			appeal() {
				uni.navigateTo({
					url: '/pages/appeal/appeal'
				})
			}
		}
	}
</script>

<style lang="scss">
	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			/* #ifndef APP-NVUE */
			margin: 0 auto;
			/* #endif */
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.swiper-box {
		height: 150px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;
	}

	.tbody {
		box-sizing: border-box;
		background: #F2FDFF;
		padding: 32rpx 32rpx 0 32rpx !important;
	}

	.u-swiper {
		background-color: #F2FDFF !important;
	}

	.navigation {
		display: flex;
		justify-content: space-between;
		text-align: center;
		padding: 0 14rpx;
		margin-top: 60rpx;
		margin-bottom: 40rpx;

		.text {
			margin-top: 10rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(20, 58, 64, 1);
		}

		image {
			width: 64rpx;
			height: 64rpx;
			margin-top: 16rpx;
		}
	}

	.style-one {
		width: 96rpx;
		height: 96rpx;
		border-radius: 32rpx;
		background: linear-gradient(180deg, #84FAB0 0%, #8FD3F4 100%);
	}

	.style-two {
		width: 96rpx;
		height: 96rpx;
		border-radius: 32rpx;
		background: linear-gradient(180deg, #F794A4 0%, #FDD6BD 100%);
	}

	.style-three {
		width: 96rpx;
		height: 96rpx;
		border-radius: 32rpx;
		background: linear-gradient(180deg, #89F7FE 0%, #66A6FF 100%);
	}

	.style-four {
		width: 96rpx;
		height: 96rpx;
		border-radius: 32rpx;
		background: linear-gradient(180deg, #00CDAC 0%, #8DDAD5 100%);
	}

	.headline {
		height: 38rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(20, 58, 64, 1);
		margin-bottom: 32rpx;
	}

	.state-left {
		width: 44rpx;
		height: 22rpx;

		line-height: 22rpx !important;
		text-align: center;
		font-size: 12rpx;
		font-weight: 400;
		color: rgba(67, 207, 124, 1);
	}

	.study {
		border-radius: 4rpx;
		border: 1rpx solid #43CF7C;
	}

	.activity {
		border-radius: 4rpx;
		border: 1rpx solid #16C1DB;
	}

	.u-collapse-item /deep/ .u-cell {
		background: #f2fdff !important;
	}
</style>